<script setup>
//一、对话框
    import { ref } from 'vue';
    const dialogVisible = ref(false);

    const companyName=ref("大连素食有限公司");//企业名称
    const creditCode=ref("2012000043245689567");//统一社会信用代码

    const companyAddress = ref("辽宁省大连市金普新区和平路56号");// 公司注册地址
    const institutionType = ref("企业机构");// 机构类型
    const companyType = ref("私营企业");//企业性质
    const establishmentDate=ref("2021年-05月13日");//成立日期
    const legalPerson = ref("李华");// 法人/负责人
    const legalPersonId = ref("210282198706235543");//法人/负责人身份证
    const contactAddress = ref("辽宁省大连市金普新区和平路56号");//单位联系地址
    const businessScope = ref("饮食");//经营范围
    const companyProfile = ref("大连素食有限公司是一家致力于研究素食美味的公司");//公司简介
    const licenseExpiry = ref("2021/5/13 -2028/5/13");//营业执照有效期
    const bankName = ref("大连银行");//开户行
    const bankAccount = ref("63299427971907320931709");//银行账户
    const bankAddress = ref("辽宁省大连市金普新区农贸街65号");//开户行地址
    const companyPhone = ref("8657-4321");//单位注册电话
    const registeredCapital = ref("200.00");//注册资本（万元）
    const paidCapital = ref("100.00万元"); //实缴资本（万元）

    //修改按钮
    const Edit = () => {
        dialogVisible.value = true;
    };

    //提交按钮
    const onSubmit=()=>{
        dialogVisible.value = false;
    }
</script>

<template>                   
     <el-container style="width: 1200px;margin: auto;background-color: #f8f9f8;padding: 30px;">
        <el-main>
            <p style="font-size: 15px;color: #959292;margin-bottom: 30px;">
                <router-link to="/" style="color: #959292;">首页</router-link> /
                <router-link to="/Profile" style="color: #959292;">个人中心</router-link> /
                <span style="color: black;">企业信息</span>
            </p>

            <el-row>
                <el-col :span="4" style="background-color: #00b99e;color: #fff;font-size: 18px;padding: 20px 0;border-radius: 20px;">
                    <router-link to="/EnterpriseInfo" style="color: #fff;">    
                        <div class="nav" style="width: 80%;margin: auto;display: flex;align-items: center;gap: 5px;background-color: #fff;color: #00b99e;border-radius: 20px;">
                            <img src="/images/个人中心/u673.svg" style="margin-top: 10px;filter: brightness(0) saturate(100%) invert(58%) sepia(26%) saturate(1531%) hue-rotate(123deg) brightness(91%) contrast(88%);"> 企业信息
                        </div>
                    </router-link>
                    <router-link to="/Bid" style="color: #fff;">
                        <div class="nav" style="width: 80%;margin: auto;display: flex;align-items: center;gap: 5px;">
                            <img src="/images/个人中心/u674.svg" style="margin-top: 10px;"> 参与投标
                        </div>
                    </router-link>
                    <router-link to="/MyBid" style="color: #fff;">
                        <div class="nav" style="width: 80%;margin: auto;display: flex;align-items: center;gap: 5px;">
                            <img src="/images/个人中心/u675.svg" style="margin-top: 10px;"> 我的投标
                        </div>
                    </router-link>
                </el-col>
                <el-col :span="19" style="background-color: #fff;font-size: 14px;padding: 40px;border-radius: 20px;margin-left: 30px;">
                    <table style="border-collapse: collapse; width: 100%;">
                        <tr style="height: 40px;">
                            <td style="width: 50%;"><strong>企业名称：</strong>{{ companyName }}</td>
                            <td style="width: 50%;"><strong>统一社会信用代码：</strong>{{ creditCode }}</td>
                        </tr>
                        <tr style="height: 40px;">
                            <td colspan="2"><strong>公司注册地址：</strong>{{ companyAddress }}</td>
                        </tr>
                        <tr style="height: 40px;">
                            <td><strong>机构类型：</strong>{{ institutionType }}</td>
                            <td><strong>企业性质：</strong>{{ companyType }}</td>
                        </tr>
                        <tr style="height: 40px;">
                            <td colspan="2"><strong>成立日期：</strong>{{ establishmentDate }}</td>
                        </tr>
                        <tr style="height: 40px;">
                            <td><strong>法人/负责人：</strong>{{ legalPerson }}</td>
                            <td><strong>法人/负责人身份证：</strong>{{ legalPersonId }}</td>
                        </tr>
                        <tr style="height: 40px;">
                            <td colspan="2"><strong>法人/负责人身份证扫描件：</strong><span style="color:#00b99e">查看图片</span></td>
                        </tr>
                        <tr style="height: 40px;">
                            <td colspan="2"><strong>单位联系地址：</strong>{{ contactAddress }}</td>
                        </tr>
                        <tr style="height: 40px;">
                            <td><strong>经营范围：</strong>{{businessScope}}</td>
                            <td><strong>公司简介：</strong>{{companyProfile}}</td>
                        </tr>
                        <tr style="height: 40px;">
                            <td colspan="2"><strong>营业执照有效期：</strong>{{ licenseExpiry }}</td>
                        </tr>
                        <tr style="height: 40px;">
                            <td colspan="2"><strong>营业执照扫描件：</strong><span style="color:#00b99e">查看图片</span></td>
                        </tr>
                        <tr style="height: 40px;">
                            <td><strong>开户行：</strong>{{bankName}}</td>
                            <td><strong>银行账号：</strong>{{ bankAccount }}</td>
                        </tr>
                        <tr style="height: 40px;">
                            <td colspan="2"><strong>开户行地址：</strong>{{ bankAddress }}</td>
                        </tr>
                        <tr style="height: 40px;">
                            <td colspan="2"><strong>单位注册电话：</strong>{{ companyPhone }}</td>
                        </tr>
                        <tr style="height: 40px;">
                            <td><strong>注册资本（万元）：</strong>{{ registeredCapital }}</td>
                            <td><strong>实缴资本：</strong>{{ paidCapital }}</td>
                        </tr>
                        <tr style="height: 40px;">
                            <td colspan="2"><strong>开户许可证/基本户存款信息证：</strong><span style="color:#00b99e">查看图片</span></td>
                        </tr>
                    </table>
                    <button class="complaint-button" @click="Edit">修改</button>
                </el-col>
            </el-row>
            
            <!-- 对话框 -->
            <el-dialog v-model="dialogVisible" title="修改企业投标" width="1200" :close-on-click-modal="false">
                <div style="margin:40px 40px;">
                    <el-form label-width="auto">
                        <table style="width: 100%;">
                            <!-- 第一行：公司注册地址 + 机构类型 -->
                            <tr>
                                <td style="width: 50%; padding: 3px;">
                                <el-form-item label="公司注册地址" required>
                                    <el-input v-model="companyAddress" placeholder="请输入" />
                                </el-form-item>
                                </td>
                                <td style="width: 50%; padding: 3px;">
                                <el-form-item label="机构类型" required>
                                    <el-select v-model="institutionType" placeholder="请选择" style="width: 100%;">
                                        <el-option label="企业机构" value="企业机构"></el-option>
                                        <el-option label="有限责任公司" value="有限责任公司"></el-option>
                                        <el-option label="个人独资企业" value="个人独资企业"></el-option>
                                    </el-select>
                                </el-form-item>
                                </td>
                            </tr>
                            <!-- 第二行：企业性质 + 成立日期 -->
                            <tr>
                                <td style="padding: 3px;">
                                <el-form-item label="企业性质" required>
                                    <el-select v-model="companyType" placeholder="请选择" style="width: 100%;">
                                        <el-option label="私营企业" value="私营企业"></el-option>
                                        <el-option label="国有企业" value="国有企业"></el-option>
                                        <el-option label="民营企业" value="民营企业"></el-option>
                                    </el-select>
                                </el-form-item>
                                </td>
                                <td style="padding: 3px;">
                                <el-form-item label="成立日期" required>
                                    <el-input v-model="establishmentDate" placeholder="请输入" />
                                </el-form-item>
                                </td>
                            </tr>
                            <!-- 第三行：法人/负责人 + 法人/负责人身份证 -->
                            <tr>
                                <td style="padding: 3px;">
                                <el-form-item label="法人/负责人" required>
                                    <el-input v-model="legalPerson" placeholder="请输入" />
                                </el-form-item>
                                </td>
                                <td style="padding: 3px;">
                                <el-form-item label="法人/负责人身份证" required>
                                    <el-input v-model="legalPersonId" placeholder="请输入" />
                                </el-form-item>
                                </td>
                            </tr>
                            <!-- 第四行：法人/负责人身份证扫描件 (单独一行) -->
                            <tr>
                                <td colspan="2" style="padding: 3px;">
                                <el-form-item label="法人/负责人身份证扫描件" required>
                                    <el-upload action="#" :auto-upload="false">
                                        <el-button type="primary" style="background-color: transparent;border: 1px solid #00b99e;color:#00b99e;padding: 5px 10px;">
                                            <img src="/images/企业信息修改/u890.png" style="margin-right: 5px;">上传文件
                                        </el-button>
                                    </el-upload>
                                </el-form-item>
                                </td>
                            </tr> 
                            <!-- 第五行：单位联系地址 + 经营范围 -->
                            <tr>
                                <td style="padding: 3px;">
                                <el-form-item label="单位联系地址" required>
                                    <el-input v-model="contactAddress" placeholder="请输入" />
                                </el-form-item>
                                </td>
                                <td style="padding: 3px;">
                                <el-form-item label="经营范围" required>
                                    <el-select v-model="businessScope" placeholder="请选择" style="width: 100%;">
                                        <el-option label="饮食" value="饮食"></el-option>
                                        <el-option label="旅游" value="旅游"></el-option>
                                        <el-option label="住宿" value="住宿"></el-option>
                                    </el-select>
                                </el-form-item>
                                </td>
                            </tr>
                            <!-- 第六行：公司简介 -->
                           <tr>
                             <td style="padding: 3px;">
                                <el-form-item label="公司简介" required>
                                    <el-input 
                                    v-model="companyProfile" 
                                    type="textarea" 
                                    :rows="3" 
                                    placeholder="请输入" />
                                </el-form-item>
                            </td>
                           </tr>
                            <!-- 第七行：营业执照有效期 (单独一行) -->
                            <tr>
                                <td style="padding: 3px;">
                                <el-form-item label="营业执照有效期" required>
                                    <el-input v-model="licenseExpiry" placeholder="请输入" />
                                </el-form-item>
                                </td>
                            </tr>
                            <!-- 第八行：营业执照扫描件 -->
                            <tr>
                                <td style="padding: 3px;">
                                <el-form-item label="营业执照扫描件" required>
                                    <el-upload action="#" :auto-upload="false">
                                        <el-button type="primary" style="background-color: transparent;border: 1px solid #00b99e;color:#00b99e;padding: 5px 10px;">
                                            <img src="/images/企业信息修改/u890.png" style="margin-right: 5px;">上传文件
                                        </el-button>
                                    </el-upload>
                                </el-form-item>
                                </td>
                                
                            </tr>
                            <!-- 第九行：开户行 + 银行账户 -->
                            <tr>
                                <td style="padding: 3px;">
                                <el-form-item label="开户行" required>
                                    <el-input v-model="bankName" placeholder="请输入" />
                                </el-form-item>
                                </td>
                                <td style="padding: 3px;">
                                <el-form-item label="银行账户" required>
                                    <el-input v-model="bankAccount" placeholder="请输入" />
                                </el-form-item>
                                </td>
                            </tr>
                            <!-- 第十行：开户行地址 + 单位注册电话 -->
                            <tr>
                                <td style="padding: 3px;">
                                <el-form-item label="开户行地址" required>
                                    <el-input v-model="bankAddress" placeholder="请输入" />
                                </el-form-item>
                                </td>
                                <td style="padding: 3px;">
                                <el-form-item label="单位注册电话" required>
                                    <el-input v-model="companyPhone" placeholder="请输入" />
                                </el-form-item>
                                </td>
                            </tr>
                            <!-- 第十一行：注册资本（万元）+ 实缴资本（万元） -->
                            <tr>
                                <td style="padding: 3px;">
                                <el-form-item label="注册资本（万元）" required>
                                    <el-input v-model="registeredCapital" placeholder="请输入" />
                                </el-form-item>
                                </td>
                                <td style="padding: 3px;">
                                <el-form-item label="实缴资本（万元）" required>
                                    <el-input v-model="paidCapital" placeholder="请输入" />
                                </el-form-item>
                                </td>
                            </tr>
                            <!-- 第十二行：开户许可证/基本户存款信息证 (单独一行) -->
                            <tr>
                                <td colspan="2" style="padding: 3px;">
                                <el-form-item label="开户许可证/基本户存款信息证" required>
                                    <el-upload action="#" :auto-upload="false">
                                        <el-button type="primary" style="background-color: transparent;border: 1px solid #00b99e;color:#00b99e;padding: 5px 10px;">
                                            <img src="/images/企业信息修改/u890.png" style="margin-right: 5px;">上传文件
                                        </el-button>
                                    </el-upload>
                                </el-form-item>
                                </td>
                            </tr>
                            </table>
                    </el-form>
                </div>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button style="width: 60px;" @click="dialogVisible=false">取消</el-button>
                        <el-button type="primary" @click="onSubmit" style="width: 60px;background: linear-gradient(to right, #7fc87c, #53a091);color:#fff;">提交</el-button>
                    </div>
                </template>
            </el-dialog>

        </el-main>
    </el-container>
</template>

<style scoped>  
/* 一、全局样式 */
    * {
        margin: 0;
        padding: 0;
    }
    /* 修改a标签样式 */
    a{
        text-decoration: none;
        color: black;
    }

/* 二、导航栏样式 */
    .nav:hover{
        background-color: #fff;
        color: #00b99e;
        border-radius: 20px;
    }
    .nav:hover img{
        filter: brightness(0) saturate(100%) invert(58%) sepia(26%) saturate(1531%) hue-rotate(123deg) brightness(91%) contrast(88%);/* 将图片颜色绿色(#00b99e) */
    }

/* 三、按钮样式 */
    .complaint-button {
        background: linear-gradient(to right, #7fc87c, #53a091);
        color: white;
        font-size: 15px;
        border: none;
        padding: 10px 30px;
        border-radius: 8px;
        cursor: pointer;
        position: absolute;
        right: 50px;
    }
 
</style>